<div class="page js_show">
    <div class="page__hd">
        <h1 class="page__title">ActionSheet</h1>
        <p class="page__desc">弹出式菜单</p>
        <a class="code_link" ng-click="showCode=!showCode">{{ showCode ? 'Hide Code' : 'Show Code' }}</a>
    </div>
    <div class="page__bd page__bd_spacing">
        <a href="javascript:;" class="weui-btn weui-btn_default" ng-click="showActionSheet()">iOS ActionSheet</a>
        <!-- <a href="javascript:;" class="weui-btn weui-btn_default" id="showAndroidActionSheet">Android ActionSheet</a> -->
    </div>
    <div class="page__bd" style="padding: 0;">
        <blockquote ng-if="showCode">JavaScript</blockquote>
        <div hljs ng-if="showCode">
$scope.showActionSheet = function() {
    var hideSheet = $weuiActionSheet.show({
        titleText: '操作提示',
        buttons: [
            {
                text: '示例菜单',
                className: 'red'
            },
            {
                text: '示例菜单',
                className: 'red'
            },
            {
                text: '示例菜单',
                className: 'red'
            }
        ],
        buttonClicked: function(index, value) {
            console.log(index, value)
            return !0
        },
        cancelText: '取消',
        cancel: function() {
            console.log('取消')
        },
        destructiveText: '删除',
        destructiveButtonClicked: function(){
            console.log('删除')
            return !0
        }
    })

    // $timeout(function() {
    //     hideSheet();
    // }, 2000);
}
        </div>
    </div>
    <!--BEGIN actionSheet-->
    <div>
        <div class="weui-mask" id="iosMask" style="display: none"></div>
        <div class="weui-actionsheet" id="iosActionsheet">
            <div class="weui-actionsheet__menu">
                <div class="weui-actionsheet__cell">示例菜单</div>
                <div class="weui-actionsheet__cell">示例菜单</div>
                <div class="weui-actionsheet__cell">示例菜单</div>
                <div class="weui-actionsheet__cell">示例菜单</div>
            </div>
            <div class="weui-actionsheet__action">
                <div class="weui-actionsheet__cell" id="iosActionsheetCancel">取消</div>
            </div>
        </div>
    </div>

    <div class="weui-skin_android" id="androidActionsheet" style="display: none">
        <div class="weui-mask"></div>
        <div class="weui-actionsheet">
            <div class="weui-actionsheet__menu">
                <div class="weui-actionsheet__cell">示例菜单</div>
                <div class="weui-actionsheet__cell">示例菜单</div>
                <div class="weui-actionsheet__cell">示例菜单</div>
            </div>
        </div>
    </div>
    <!--END actionSheet-->
    <div class="page__ft j_bottom">
        <a href="javascript:home()"><img src="images/icon_footer_link.png"></a>
    </div>
</div>